{% extends "public/base.html" %}

{% block title %}{{ publication.custom_title or scale.title }} - 心理测评{% endblock %}

{% block extra_css %}
<style>
        /* 重要：覆盖base.html的样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
            line-height: 1.6 !important;
            color: #333 !important;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            min-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* 隐藏导航栏，因为这是公共页面 */
        .navbar {
            display: none !important;
        }

        /* 主容器 */
        .main-wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 英雄区域 */
        .hero-section {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
            color: white;
            padding: 80px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 24px;
            backdrop-filter: blur(10px);
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 16px;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.25rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .hero-stat {
            text-align: center;
        }

        .stat-value {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* 内容容器 */
        .content-container {
            flex: 1;
            background: #f8fafc;
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        /* 快速开始卡片 */
        .quick-start-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .card-header {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            padding: 32px;
            text-align: center;
        }

        .card-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .card-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin: 0;
        }

        .card-body {
            padding: 40px;
            text-align: center;
        }

        .start-features {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            font-weight: 500;
        }

        .feature i {
            color: #10b981;
            font-size: 1.2rem;
        }

        .start-button {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            padding: 16px 32px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
        }

        .start-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
        }

        .start-note {
            color: #6b7280;
            font-size: 0.9rem;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* 信息区域 */
        .info-section {
            display: grid;
            gap: 32px;
            margin-bottom: 40px;
        }

        .info-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .info-card .card-header {
            background: #f8fafc;
            color: #374151;
            padding: 24px 32px;
            border-bottom: 1px solid #e5e7eb;
        }

        .info-card .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }

        /* 详情网格 */
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            padding: 32px;
        }

        .detail-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .detail-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .detail-content h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 4px;
            color: #111827;
        }

        .detail-content p {
            font-size: 1.25rem;
            font-weight: 700;
            color: #3b82f6;
            margin-bottom: 4px;
        }

        .detail-content small {
            color: #6b7280;
            font-size: 0.85rem;
        }

        /* 步骤说明 */
        .instruction-steps {
            padding: 32px;
        }

        .step {
            display: flex;
            gap: 20px;
            margin-bottom: 24px;
            align-items: flex-start;
        }

        .step:last-child {
            margin-bottom: 0;
        }

        .step-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            flex-shrink: 0;
        }

        .step-content h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: #111827;
        }

        .step-content p {
            color: #6b7280;
            margin: 0;
        }

        .custom-instruction {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 32px;
            color: #0c4a6e;
        }

        /* 底部信息 */
        .footer-info {
            display: grid;
            gap: 24px;
        }

        .privacy-card,
        .publisher-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .privacy-icon,
        .publisher-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .publisher-icon {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

        .privacy-content h4,
        .publisher-content h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: #111827;
        }

        .privacy-content p,
        .publisher-content p {
            color: #6b7280;
            margin: 0;
            line-height: 1.6;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-description {
                font-size: 1.1rem;
            }

            .hero-stats {
                gap: 24px;
            }

            .content-container {
                padding: 40px 16px;
            }

            .card-header,
            .card-body {
                padding: 24px;
            }

            .start-features {
                flex-direction: column;
                gap: 16px;
            }

            .detail-grid {
                grid-template-columns: 1fr;
                padding: 24px;
            }

            .instruction-steps {
                padding: 24px;
            }

            .privacy-card,
            .publisher-card {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .hero-section {
                padding: 60px 16px;
            }

            .hero-title {
                font-size: 1.75rem;
            }

            .hero-stats {
                flex-direction: column;
                gap: 16px;
            }

            .start-button {
                width: 100%;
                justify-content: center;
            }
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quick-start-card,
        .info-card,
        .privacy-card,
        .publisher-card {
            animation: fadeInUp 0.6s ease-out;
        }

        .info-card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .privacy-card {
            animation-delay: 0.2s;
        }

        .publisher-card {
            animation-delay: 0.3s;
        }

        /* 加载状态 */
        .loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .loading .start-button {
            background: #9ca3af;
            cursor: not-allowed;
        }

        .loading .start-button:hover {
            transform: none;
            box-shadow: none;
        }
</style>
{% endblock %}

{% block content %}
<!-- 主容器 -->
<div class="main-wrapper">
    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="bi bi-clipboard-check"></i>
                心理健康评估
            </div>
            <h1 class="hero-title">
                {{ publication.custom_title or scale.title }}
            </h1>
            <p class="hero-description">
                {{ publication.custom_description or scale.description or '专业的心理健康评估工具，帮助您了解自己的心理状态' }}
            </p>
            <div class="hero-stats">
                <div class="hero-stat">
                    <span class="stat-value">{{ scale.estimated_time or 5 }}</span>
                    <span class="stat-label">分钟</span>
                </div>
                <div class="hero-stat">
                    <span class="stat-value">{{ scale.question_count or 20 }}</span>
                    <span class="stat-label">题目</span>
                </div>
                <div class="hero-stat">
                    <span class="stat-value">{{ publication.assessment_count or 0 }}</span>
                    <span class="stat-label">已完成</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <div class="content-container">
        <!-- 快速开始卡片 -->
        <div class="quick-start-card">
            <div class="card-header">
                <h2 class="card-title">
                    <i class="bi bi-rocket-takeoff"></i>
                    开始测评
                </h2>
                <p class="card-subtitle">准备好了解您的心理健康状况吗？</p>
            </div>
            <div class="card-body">
                <div class="start-features">
                    <div class="feature">
                        <i class="bi bi-shield-check"></i>
                        <span>完全匿名</span>
                    </div>
                    <div class="feature">
                        <i class="bi bi-clock"></i>
                        <span>快速完成</span>
                    </div>
                    <div class="feature">
                        <i class="bi bi-award"></i>
                        <span>专业可靠</span>
                    </div>
                </div>
                <button class="start-button" onclick="startAssessment()">
                    <i class="bi bi-play-circle"></i>
                    立即开始测评
                </button>
                <p class="start-note">
                    <i class="bi bi-info-circle"></i>
                    测评过程中可随时暂停，建议在安静环境中完成
                </p>
            </div>
        </div>

        <!-- 详细信息区域 -->
        <div class="info-section">
            <!-- 量表详情 -->
            <div class="info-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="bi bi-info-circle"></i>
                        量表详情
                    </h3>
                </div>
                <div class="card-body">
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="bi bi-stopwatch"></i>
                            </div>
                            <div class="detail-content">
                                <h4>预估时间</h4>
                                <p>{{ scale.estimated_time or 5 }} 分钟</p>
                                <small>根据平均完成时间估算</small>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="bi bi-list-check"></i>
                            </div>
                            <div class="detail-content">
                                <h4>题目数量</h4>
                                <p>{{ scale.question_count or 20 }} 题</p>
                                <small>科学设计的评估题目</small>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="detail-content">
                                <h4>参与人数</h4>
                                <p>{{ publication.assessment_count or 0 }} 人</p>
                                <small>已完成此量表的用户</small>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="bi bi-graph-up"></i>
                            </div>
                            <div class="detail-content">
                                <h4>完成率</h4>
                                <p>
                                    {% if publication.access_count and publication.access_count > 0 %}
                                        {{ "%.1f"|format((publication.assessment_count / publication.access_count * 100)) }}%
                                    {% else %}
                                        0%
                                    {% endif %}
                                </p>
                                <small>用户完成测评的比例</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测评说明 -->
            <div class="info-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="bi bi-book"></i>
                        测评说明
                    </h3>
                </div>
                <div class="card-body">
                    {% if scale.instruction %}
                        <div class="custom-instruction">
                            {{ scale.instruction|safe }}
                        </div>
                    {% endif %}
                    
                    <div class="instruction-steps">
                        <div class="step">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h4>准备环境</h4>
                                <p>请在安静的环境中完成测评，确保不被打扰</p>
                            </div>
                        </div>
                        <div class="step">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h4>诚实作答</h4>
                                <p>根据您的真实感受选择答案，没有标准答案</p>
                            </div>
                        </div>
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h4>完成测评</h4>
                                <p>建议一次性完成，完成后您将获得详细的分析报告</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="footer-info">
            <!-- 隐私保护 -->
            <div class="privacy-card">
                <div class="privacy-icon">
                    <i class="bi bi-shield-lock"></i>
                </div>
                <div class="privacy-content">
                    <h4>隐私保护承诺</h4>
                    <p>您的测评数据将被匿名处理，仅用于生成个人报告。我们不会收集任何可以识别您身份的信息。</p>
                </div>
            </div>

            <!-- 发布者信息 -->
            {% if publication.custom_title or publication.custom_description %}
            <div class="publisher-card">
                <div class="publisher-icon">
                    <i class="bi bi-person-badge"></i>
                </div>
                <div class="publisher-content">
                    <h4>发布者说明</h4>
                    <p>{{ publication.custom_description or '此量表由专业机构发布，用于心理健康评估研究。' }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 确认开始模态框 -->
<div class="modal fade" id="startModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-play-circle me-2"></i>
                    开始测评
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="bi bi-clock display-6 text-primary"></i>
                </div>
                <h6 class="text-center mb-3">测评前确认</h6>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        我已阅读并理解测评说明
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        我处于安静的环境中，不会被打扰
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        我将诚实回答每个问题
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        我同意匿名数据用于生成报告
                    </li>
                </ul>
                
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>预估时间：</strong>{{ scale.estimated_time or 5 }} 分钟
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-arrow-left me-2"></i>稍后再说
                </button>
                <button type="button" class="btn btn-success" onclick="confirmStart()">
                    <i class="bi bi-play-fill me-2"></i>确认开始
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 加载状态 -->
<div class="text-center py-5 d-none" id="loading-indicator">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2 text-muted">正在准备测评...</p>
</div>
{% endblock %}

{% block extra_js %}
<script>
const publicationToken = '{{ publication.publication_token }}';
const scaleId = {{ scale.id|default(0) }};

// 页面加载时记录访问
document.addEventListener('DOMContentLoaded', function() {
    recordAccess();
});

// 记录访问 - 已在服务器端自动处理
function recordAccess() {
    // 访问记录已在页面加载时由服务器端自动处理
    // 无需额外的API调用
}

// 开始测评
function startAssessment() {
    const modal = new bootstrap.Modal(document.getElementById('startModal'));
    modal.show();
}

// 确认开始测评
function confirmStart() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('startModal'));
    modal.hide();
    
    // 显示加载状态
    document.getElementById('loading-indicator').classList.remove('d-none');
    
    // 跳转到测评页面
    setTimeout(() => {
        window.location.href = `/public/scale/${publicationToken}/start`;
    }, 1000);
}

// 添加页面动画
document.addEventListener('DOMContentLoaded', function() {
    // 为卡片添加淡入动画
    const cards = document.querySelectorAll('.scale-info-card, .stats-section, .instruction-section');
    cards.forEach((card, index) => {
        setTimeout(() => {
            addFadeInAnimation(card);
        }, index * 200);
    });
});

// 平滑滚动到说明部分
function scrollToInstructions() {
    const instructionSection = document.querySelector('.instruction-section');
    scrollToElement(instructionSection);
}

// 键盘快捷键支持
document.addEventListener('keydown', function(event) {
    // 按 Enter 键开始测评
    if (event.key === 'Enter' && !document.querySelector('.modal.show')) {
        startAssessment();
    }
    
    // 按 Escape 键关闭模态框
    if (event.key === 'Escape') {
        const modal = bootstrap.Modal.getInstance(document.getElementById('startModal'));
        if (modal) {
            modal.hide();
        }
    }
});

// 页面可见性变化时的处理
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        // 页面重新可见时，可以记录重新访问
        console.log('页面重新可见');
    }
});

// 防止页面刷新时丢失状态
window.addEventListener('beforeunload', function(event) {
    // 如果用户正在查看页面，给出提示
    if (document.visibilityState === 'visible') {
        event.preventDefault();
        event.returnValue = '';
    }
});
</script>
{% endblock %}